<template>
  <div>
    <h3>table</h3>
    <pre>
        el-table
            data:整个表格的数据,它要求是数组类型数据
            border:是否添加边框  boolean:默认为false
            默认插槽需要展示 的是一列一列的内容
            el-table-column
                prop="需要展示的数组每一项中的对应的字段"
                label="该栏的标题"
                width:设置当前列的宽度
            序号处理
              type:index到相应栏就可以了
            自定义栏 
              el-table-column  
                作用域插槽下的默认插槽 v-slot="scope"
                scope={
                    $index:当前行数据的索引,从0开始
                    row:当前行数据
                }

    </pre>
    <el-table :data="tableData" border style="width:50%;">
      <el-table-column type="index" label="序号" width="60px"></el-table-column>
      <el-table-column label="日期" prop="date" width="120px"></el-table-column>
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="地址" prop="address"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ $index, row }">
          <h3>{{ $index }}----------{{ row }}</h3>
          <button>修改</button>
          <button>删除</button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data () {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ]
    }
  }
}
</script>
<style></style>
